<template>
  <div class="suffix-search">
    <a-input-search
      :placeholder="l('SearchWithThreeDot')"
      enter-button
      @search="keyupCallback"
      @change="onFilterTextChange"
      @keyup.enter="keyupCallback"
      v-model="text"
    />
  </div>
</template>

<script>
  import { AppComponentBase } from '/@/shared/component-base';
  import { QueryCondition, QueryOperator } from '../../service-proxies';

  export default {
    name: 'g-suffix-search',
    mixins: [AppComponentBase],
    methods: {
      onFilterTextChange(e) {
        this.$emit('filterTextChange', this.text);
      },
      keyupCallback() {
        const queryConditions = [];
        const input = new QueryCondition();
        if (this.filterText) {
          input.value = this.filterText;
          input.operator = QueryOperator.Contains;
          input.field = 'name';
          queryConditions.push(input);
        }
        this.$emit('callback', queryConditions);
      },
    },
    props: {
      filterText: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        text: this.filterText,
      };
    },
  };
</script>

<style scoped></style>
